<template>
  <div class="footer-two">
      <router-link v-for="it in data" :key="it.id" :to="it.href">
        <img :src="it.img" />
        <p>{{ it.title }}</p>
      </router-link>
  </div>
</template>
<script setup>
  const data = [
    {
        id: 0,
        title: "首页",
        img: "/img/下载 (6).png",
        href: "/HomeTwo"
    },
    {
        id: 1,
        title: "3+1本科",
        img: "/img/1+3本科.0887469d.png",
        href: "/benkeyi"
    },
    {
        id: 2,
        title: "2+2本科",
        img: "/img/下载 (9).png",
        href: "/twobenke"
    },
    {
        id: 3,
        title: "韩国",   
        img: "/img/韩国留学.2014d4e6.png",
        href: "/hanguo"

    },
    {
        id: 4,
        title: "本硕",
        img: "/img/下载 (10).png",
        href: "/benshuo"
    },
    {
        id: 5,
        title: "新加坡",
        img: "/img/新加坡留学.0b886794.png",
        href: "/xinjiapo"
    }
  ]

</script>
<style scoped>
.footer-two {
  width: 100%;
  height: 3rem;
  position: fixed;
  bottom: 0;
  background-image: linear-gradient(#148dfe, #7d48f8);
  z-index: 99;
  border-top: 0.02rem solid #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-two a {
    display: block;
    width: 16%;
    height: 2rem;
}
.footer-two a img {
    width: 1rem;
    height: 1rem;
    margin: 0 auto; 
}
.footer-two a p {
    width: 100%;
    text-align: center;
    font-size: 0.5rem;
    line-height: 1rem;
    color: #fff;
}
</style>